<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/admin.css"/>
    <style>
        .fileupload{
            position: relative;
        }
        .fileupload [type="file"]{
            width: 82px;
            height: 34px;
            position: absolute;
            opacity: 0;
        }
    </style>
</head>
<body>
<!--侧边栏-->
<aside class="ad_aside">
    <!--商标-->
    <div class="brand"><a href="index.html">Mall</a></div>
    <!--用户-->
    <div class="user">
        <img src="images/default.png" alt=""/>
        <span>超级管理员</span>
    </div>
    <!--菜单-->
    <div class="menu">
        <ul>
            <li><a href="user.html"><span class="glyphicon glyphicon-user"></span> 用户管理</a></li>
            <li>
                <a href="javascript:;"><span class="glyphicon glyphicon-list"></span> 分类管理</a>
                <div class="child">
                    <a href="category.html">一级分类</a>
                    <a href="brand.html">二级分类</a>
                </div>
            </li>
            <li><a href="product.html"><span class="glyphicon glyphicon-tags"></span> 商品管理</a></li>
        </ul>
    </div>
</aside>
<!--内容-->
<section class="ad_section">
    <!--顶部导航-->
    <nav class="ad_nav">
        <a data-menu href="javascript:;"><span class="glyphicon glyphicon-align-justify"></span></a>
        <a data-logout href="javascript:;"><span class="glyphicon glyphicon-log-out"></span></a>
    </nav>
    <div class="container-fluid">
        <!--路径导航-->
        <ol class="breadcrumb">
            <li><a href="#">管理系统</a></li>
            <li class="active">商品管理</li>
        </ol>
        <div id="app">
            <div class="ad_content">
                <button id="addBtn" class="btn btn-default mb_15">添加商品</button>
                <input class="search-content" type="text" placeholder="请输入关键词" v-model="keywords">
                <button class="search-btn btn-info" type="submit" @click="search">搜索商品</button>
                <a href="http://127.0.0.1:8000/api/proexcel" class="btn btn-sm btn-primary" type="submit">生成Excel报表</a>
                <table class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th width="5%">序号</th>
                        <th width="15%">商品名称</th>
                        <th width="10%">品牌</th>
                        <th width="15%">商品描述</th>
                        <th width="5%">库存</th>
                        <th width="10%">价格</th>
                        <th width="10%">原价</th>
                        <th width="5%">尺寸</th>
                        <th width="10%">状态</th>
                        <th width="10%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,i) in list">
                            <td>{{i+1}}</td>
                            <td>{{item.proName}}</td>
                            <td>{{item.proBrandName}}</td>
                            <td>{{item.proDesc}}</td>
                            <td>{{item.num}}</td>
                            <td>{{item.price}}</td>
                            <td>{{item.oldPrice}}</td>
                            <td>{{item.size}}</td>
                            <td v-if="item.statu==1">已上架</td>
                            <td v-else>已下架</td>
                            <td v-if="item.statu==1">
                                <a @click="updateStatu(item.statu,item.id)" class="btn btn-sm btn-danger">下架商品</a>
                            </td>
                            <td v-else>
                                <a @click="updateStatu(item.statu,item.id)" class="btn btn-sm btn-primary">上架商品</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="modal fade" id="addModal">
                <div class="modal-dialog modal-md">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                            <h4 class="modal-title">编辑商品</h4>
                        </div>
                        <div class="modal-body">
                            <form action="#" id="form" autocomplete="off">
                                <input type="hidden" v-model="brandId" id="brandId"/>
                                <div class="form-group">
                                    <div class="dropdown">
                                        <span>品牌名称：</span>
                                        <button class="btn btn-default" type="button" data-toggle="dropdown">
                                            <span class="dropdown-text" v-html="brandName">请选择</span> <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" id="brandMenuId" aria-labelledby="dropdownMenu1">
                                            <li v-for="(item,i) in list2" :id="item.id" @click="click1(item.id,item.brandName)">
                                                <a href="#" >{{item.brandName}}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!--商品名称-->
                                <div class="form-group">
                                    <input v-model="proName" type="text" class="form-control" placeholder="请输入商品名称">
                                </div>
                                <!--商品说明-->
                                <div class="form-group">
                                    <textarea v-model="proDesc"  class="form-control" placeholder="请输入商品描述"></textarea>
                                </div>
                                <!--商品库存-->
                                <div class="form-group">
                                    <input v-model="num" type="text" class="form-control" placeholder="请输入商品库存">
                                </div>
                                <!--商品价格-->
                                <div class="form-group">
                                    <input v-model="price" type="text" class="form-control" placeholder="请输入商品价格">
                                </div>
                                <!--商品原价-->
                                <div class="form-group">
                                    <input v-model="oldPrice" type="text" class="form-control" placeholder="请输入商品原价">
                                </div>
                                <!--商品尺码-->
                                <div class="form-group">
                                    <input v-model="size" type="text" class="form-control" placeholder="请输入商品尺码">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" @click="click2">确定</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/jquery-fileupload/jquery.ui.widget.js"></script>
<script src="assets/jquery-fileupload/jquery.fileupload.js"></script>
<script src="js/vue-2.6.12.js"></script>
<script src="js/axios-0.21.0.js"></script>
<script src="js/qs-6.9.4.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            list:null,
            list2:null,
            brandId:null,
            brandName:'请选择',
            proName:null,
            proDesc:null,
            num:null,
            price:null,
            oldPrice:null,
            size:null,
            keywords:null
        },
        mounted(){
            axios.get('http://127.0.0.1:8000/api/products')
                .then(resp => this.list = resp.data.productlist)

            axios.get('http://127.0.0.1:8000/api/brands')
                 .then(resp => {
                     this.list2 = resp.data.brandlist
                 })
        },
        methods:{
                click1:function (id,brandName){
                    this.brandId = id
                    this.brandName = brandName
                },
                updateStatu:function (statu,id){
                    axios.post('http://127.0.0.1:8000/api/updateprostatu',Qs.stringify({
                        statu:statu==1?0:1,
                        id:id
                   })).then(resp => {
                       if(resp.data.code==200){
                           axios.get('http://127.0.0.1:8000/api/products')
                               .then(resp => this.list = resp.data.productlist)
                       }else{
                           alert(resp.data.messages)
                       }
                   })
                },
                click2:function (){
                   axios.post('http://127.0.0.1:8000/api/addproduct',Qs.stringify({
                       brandId:this.brandId,
                       proName:this.proName,
                       proDesc:this.proDesc,
                       num:this.num,
                       price:this.price,
                       oldPrice:this.oldPrice,
                       size:this.size
                   })).then(resp => {
                       if(resp.data.code==200){
                           $('#addModal').modal('hide');
                           axios.get('http://127.0.0.1:8000/api/products')
                               .then(resp => this.list = resp.data.productlist)
                       }else{
                           alert(resp.data.messages)
                       }
                   })
               },
               search(){
                    if (!this.keywords){
                        alert('你还没有输入搜索内容！')
                        return false
                    }
                   axios.get('http://127.0.0.1:8000/api/products',{
                        params: {
                            pagesize:10,
                            pageno:1,
                            keywords:this.keywords
                        }
                    }).then(resp=>{
                        this.list = resp.data.productlist
                    })
               }
        }
    })

    $('#addBtn').on('click',function () {
        /*显示模态框*/
        $('#addModal').modal('show');
    });
</script>
</body>
</html>